<template>
  <!--  解释-->
  <!--  高度设置为 100%：-->
  <!--  将 .table-container 的高度设置为 100%，这样它会根据父容器的高度进行调整。-->
  <!--  将 .table-body 的高度设置为 calc(100% - 40px)，其中 40px 是表头的高度（假设表头高度为 40px），这样 .table-body 的高度会根据 .table-container 的高度动态调整。-->
  <!--  动态计算行数：-->
  <!--  在 onMounted 生命周期钩子中调用 calculateRowHeight 方法，计算每行的高度和可以显示的行数。-->
  <!--  在 calculateRowHeight 方法中，获取第一行的高度，并根据 .table-body 的高度计算可以显示的行数。-->
  <!--  滚动逻辑调整：-->
  <!--  在 startScrolling 方法中，根据 visibleRows.value 来决定何时重置滚动偏移量，确保滚动效果正确。-->
  <!--  监听窗口大小变化：-->
  <!--  使用 watch 监听窗口大小的变化，当窗口大小变化时，重新计算行高和可见行数，以适应不同的屏幕尺寸。-->
  <!--  通过这些修改，table-container 和 table-body 的高度会根据容器大小自动调整，并且会根据容器的高度自动决定展示几行数据。-->
  <!--  -->

  <div class="table-container">
    <div class="table-header">
      <table class="data-table">
        <thead>
          <tr>
            <th>项目名称</th>
            <th>面积</th>
            <th>VEP值</th>
          </tr>
        </thead>
      </table>
    </div>
    <div class="table-body" :style="{ transform: `translateY(-${scrollOffset}px)` }">
      <table class="data-table">
        <tbody>
          <tr v-for="(item, index) in tableData" :key="index" ref="tableRows">
            <td>{{ item.name }}</td>
            <td>{{ item.area }}</td>
            <td>{{ item.vep }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<style scoped>
.table-container {
  width: 100%;
  height: 100%; /* 设置表格容器的高度为100% */
  overflow: hidden; /* 隐藏超出部分 */
  position: relative;
  margin: 0 auto;
}

.table-header {
  width: 100%;
  position: sticky;
  top: 0;
  background-color: #fff; /* 确保表头背景色与表格内容一致 */
  z-index: 1; /* 确保表头在内容之上 */
}

.table-body {
  width: 100%;
  height: calc(100% - 40px); /* 根据表头高度调整 */
  overflow-y: hidden; /* 隐藏垂直滚动条 */
  transition: transform 0.5s ease-in-out; /* 平滑过渡 */
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 8px;
  text-align: left;
  /* 表格分割线的颜色，下框线*/
  border-bottom: 1px solid #7c7878;
}

.data-table th {
  /* 表格标题行的背景*/
  background-color: #1d1d1d;
  font-weight: bold;
}

.data-table tr:nth-child(even) {
  /* 表格交替行的背景*/
  background-color: #1d1d1d;
}

.data-table tr:hover {
  background-color: #777272;
}
</style>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue';

// 定义表格数据类型
interface TableDataItem {
  name: string;
  area: string;
  vep: string;
}

// 假设你有一个方法来获取数据
const fetchData = async () => {
  return [
    { name: '葛仙村', area: 'XXXXXX', vep: 'XXXXXX' },
    { name: '河红茶', area: 'XXXXXX', vep: 'XXXXXX' },
    { name: '野生动物园', area: 'XXXXXX', vep: 'XXXXXX' },
    { name: '葛仙村2', area: 'XXXXXX', vep: 'XXXXXX' },
    { name: '河红茶2', area: 'XXXXXX', vep: 'XXXXXX' },
    { name: '野生动物园2', area: 'XXXXXX', vep: 'XXXXXX' },
  ];
};

// 定义一个变量来存储表格数据，并显式指定类型
const tableData = ref<TableDataItem[]>([]);

// 定义滚动偏移量
const scrollOffset = ref(0);

// 定义定时器
let scrollTimer: ReturnType<typeof setTimeout> | null = null;

// 引用表格行
const tableRows = ref<HTMLElement[]>([]);

// 定义一个变量来存储每行的高度
const rowHeight = ref(0);

// 定义一个变量来存储可以显示的行数
const visibleRows = ref(0);

// 在组件挂载后执行
onMounted(async () => {
  tableData.value = await fetchData();
  await nextTick(); // 确保 DOM 已经更新
  calculateRowHeight();
  startScrolling();
});

// 在组件卸载前清除定时器
onUnmounted(() => {
  if (scrollTimer) {
    clearInterval(scrollTimer);
  }
});

// 计算每行的高度
const calculateRowHeight = () => {
  if (tableRows.value.length > 0) {
    rowHeight.value = tableRows.value[0].getBoundingClientRect().height;
    visibleRows.value = Math.floor((document.querySelector('.table-body') as HTMLElement).clientHeight / rowHeight.value);
  }
};

// 开始滚动
const startScrolling = () => {
  let rowIndex = 0;
  scrollTimer = setInterval(() => {
    if (rowIndex < tableRows.value.length) {
      scrollOffset.value += rowHeight.value;
      rowIndex++;
      if (rowIndex >= visibleRows.value) {
        scrollOffset.value = 0;
        rowIndex = 0;
      }
    } else {
      scrollOffset.value = 0;
      rowIndex = 0;
    }
  }, 3000); // 每3秒滚动一次
};

// 监听窗口大小变化，重新计算行高和可见行数
watch(
  () => window.innerWidth,
  () => {
    calculateRowHeight();
  }
);
</script>
